<template>
  <div class="pneumonia">
    <van-nav-bar
  title="慢阻肺疾病评估"
  left-arrow
  @click-left="back"
/>
<ul>
    <p>过去1年急性家中次数：</p>
        <li v-for="(item, index) in items" :key="index" @click="toggleHighlight(index)" :class="{ highlight: isHighlighted[index] }">
            {{ item.name }}
        </li>
</ul>
<ol>
    <p>呼吸困难指数分级 (mMRC):</p>
        <li v-for="(v, i) in menus" :key="i" @click="changeHighlighted(i)" :class="{ highlight2: isHighlighted2[i] }">
            {{ v.name }}
        </li>
</ol>

</div>
<button disabled class="goCAT" >进入CAT评分</button>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue';
const disabled =ref(true)
const items = ref([
    { name: '< 2 次无急性加重导致住院', id: 1 },
    { name: '< 2 次但因急性加重导致住院', id: 2 },
    { name: '≥ 2次', id: 3 }
]);
const menus = ref([
    { name: '0 级：只有在剧烈运动时才感到呼吸困难', id: 1 },
    { name: '1 级：只有在剧烈运动时才感到呼吸困难', id: 2 },
    { name: '2 级：因为气短会比同龄人走得慢，或按自己的脚步行走时需要停下来休息', id: 3 },
    { name: '3 级：平地行走 100 米或走几分钟后需要停下来休息', id: 2 },
    { name: '4 级：因为严重呼吸困难以至于不能离开家或影响到穿衣或脱衣', id: 2 },
]);
const isHighlighted = ref(Array(items.value).fill(false)); // 对应每个项的高亮状态数组
const isHighlighted2 = ref(Array(menus.value).fill(false));
const toggleHighlight = (index) => {
    isHighlighted.value[index] =!isHighlighted.value[index]; // 切换对应项的高亮状态
};
const changeHighlighted=(i)=>{
    isHighlighted2.value[i]=!isHighlighted2.value[i]
}
const router = useRouter()
// 返回上一页
const back = () => {
  router.back()
}
</script>

<style scoped>
.pneumonia{
    width: 100%;
    height: 100%;
    background: #fff;
    position: relative;
}
ul{
    width: 3.5rem;
    height: 2rem;
    background: #fff;
    margin-left: .1rem;
    margin-top: .1rem;
}
ul li{
    width: 3.5rem;
    height: .5rem;
    background: #f5f6f6;
    border-radius: .1rem;
    border-bottom: 1px solid #ccc;
    line-height: .5rem;
    margin-left: .05rem;
    margin-top: .1rem;
    font-weight: bold;
    font-size: .16rem;
    color: #000;
}
ol{
    width: 3.5rem;
    height: 2rem;
    background: #fff;
    margin-left: .1rem;
    margin-top: .5rem;
}
ol li{
    width: 3.5rem;
    height: .7rem;
    background: #f5f6f6;
    border-radius: .1rem;
    border-bottom: 1px solid #ccc;
    line-height: .3rem;
    margin-left: .05rem;
    margin-top: .1rem;
    padding-top: .1rem;
    font-weight: bold;
    font-size: .16rem;
    color: #000;
}
.highlight {
    background-color: #eff5ff;
    color: #3f86ff;
}
.highlight2 {
    background-color: #eff5ff;
    color: #3f86ff;
}
.goCAT{
    width: 3.5rem;
    height: 0.5rem;
    background: blue;
    color: #fff;
    border-radius: .2rem;
    border: none;
    position: absolute;
    bottom: -2rem;
    left: .1rem
}
</style>
